<template>
  <div>
    <div v-if="! teachersend.hasOwnProperty('tokenstring') ">
      <div class="bgimg">
        <el-image
          :src="baseurl + '/images/other/11333874_p0_master1200.jpg'"
          fit="cover"
          style="height: 600px; width: 100%"
        ></el-image>
        <div class="logincontent">
          <div class="logincontent_title">家庭指导师登录</div>
          <div class="logincontent_input">
            <div class="inputline">
              <div style="width: 15%">用户名</div>
              <el-input
                placeholder="请输入用户名"
                v-model="login_tel"
                clearable
                class="elinputp"
              >
              </el-input>
            </div>
            <div class="inputline">
              <div style="width: 15%">密码</div>
              <el-input
                class="elinputp"
                placeholder="请输入密码"
                v-model="login_password"
                show-password
              ></el-input>
            </div>
            <div class="inputline"  style="display: flex;justify-content: space-around;">
              <el-button
                style="background-color: #9c446e; color: #fff"
                @click="nextclick"
                >下一步</el-button
              >
              <el-button
                :loading="loading"
                type="danger"
                style="background-color:#9c446e ;color: #FFF;"
                @click="token_login_temp"
                >临时身份token</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="teachersend.hasOwnProperty('tokenstring') && !showspuindex">
      <div>
        <div
          style="
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 34px;
            color: #9c446e;
            padding: 30px 20px;
          "
        >
          我的学员家长
        </div>
        <el-row :gutter="12">
          <el-col
            :span="6"
            v-for="(item, index) in userlist"
            :key="index"
            style="display: flex;flex-wrap: wrap;"
          >
            <el-card shadow="always" style="display: flex;justify-content: center;align-items: center;width: 300px;">
              <img
                class="image"
                :src="
                  item.provider == 'tel' ? baseurl + item.imgUrl : item.imgUrl
                "
                alt=""
                @click="forstumsg(item)"
              />
              <div style="padding: 14px">
                <span>{{ item.nickName }}</span>
                <div class="bottom clearfix">
                  <span class="time">{{ item.userName }}</span>
                  <el-button style="color: #9c446e;font-weight: 800;" type="text" class="button" @click="showspuindexbut(item)">规划亲子手册</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <el-dialog
        :title="'家庭教育诉求'"
        :visible.sync="centerDialogVisible"
        width="70%"
        center
      >
        <div>
          <div ref="scrollContainer" style="max-height: 400px; overflow-y: auto;" >
          <!-- 大量内容 -->
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>家庭情况</span>
            </div>
            <div style="padding: 10px 20px;">
            <span >教育方式:</span>
            <span style="padding: 0 10px; color: #9c446e;">{{ detail_user_request.Educationalmode }}</span>
          </div>
          <div style="padding: 10px 20px;">
            <span>家庭学习环境:</span>
            <span style="padding: 0 10px; color: #9c446e;">{{ detail_user_request. Learningenvironment}}</span>
          </div>
          <div style="padding: 10px 20px;">
            <span>家庭参与程度:</span>
            <span style="padding: 0 10px; color: #9c446e;">{{ detail_user_request.Degree }}</span>
          </div>
          <div style="padding: 10px 20px;">
            <span>性格类型:</span>
            <span style="padding: 0 10px; color: #9c446e;">{{ detail_user_request.Personalitytype }}</span>
          </div>
          
          <div style="padding: 10px 20px;">
            <span>家庭教育活动:</span>
            <span style="padding: 0 10px; color: #9c446e;">{{ detail_user_request.environmentactivity }}</span>
          </div>
          </el-card>
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>家庭学习氛围:</span>
            </div>
            <span style="color: #9c446e;">{{ detail_user_request.Atmospheredescription }}</span>
          </el-card>

          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>孩子兴趣爱好:</span>
            </div>
            <span style="color: #9c446e;">{{ detail_user_request.Hobbies }}</span>
          </el-card>

          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>家长的价值观:</span>
            </div>
            <span style="color: #9c446e;">{{ detail_user_request.Attitudevalue }}</span>
          </el-card>
          
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>孩子成绩与学习方法:</span>
            </div>
            <span style="color: #9c446e;">{{ detail_user_request.Achievementlearningmethod }}</span>
          </el-card>
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>家庭教育困惑:</span>
            </div>
            <span style="color: #9c446e;">{{ detail_user_request.content }}</span>
          </el-card>
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>教育期望:</span>
            </div>
            <span style="color: #9c446e;">{{ detail_user_request.expectations }}</span>
          </el-card>
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>需要获得的帮助:</span>
            </div>
            <span style="color: #9c446e;">{{ detail_user_request.needs }}</span>
          </el-card>
        </div>

          

        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div v-if="showspuindex">
      <spuindex :userid="userid" :teacherid="teachersend.teacherid"></spuindex>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import spuindex from "./spuform/index.vue";
export default {
  data() {
    return {
      login_password: "",
      login_tel: "",
      islogin: false,
      teachersend: {},
      userlist: [],
      baseurl: "https://zyc618.mynatapp.cc",
      showspuindex: false,
      centerDialogVisible: false,
      detail_user_request:{},
      userid:""
    };
  },
  components: { spuindex },
  created() {
    // 页面加载时检查是否有保存的数据，并显示在输入框中
    const savedData = sessionStorage.getItem('teacherData');
    if (savedData) {
      this.teachersend = JSON.parse(savedData);
      this.islogin = true;
      this.getallstu();
    }
    this.$bus.$on('back_CommunityConvention',(data)=>{
      this.showspuindex = data;
    })
  },
  beforeDestroy() {
    // 清除sessionStorage中的数据
    // sessionStorage.removeItem('teacherData');
  },
  methods: {
    saveData() {
      // 存储数据到sessionStorage
      sessionStorage.setItem('teacherData', JSON.stringify(this.teachersend));
      
    },
    //登录回调:
    async nextclick() {
      let result = await this.$API.CommunityConvention.loginteacher({
        password: this.login_password,
        login_tel: this.login_tel,
      });

      if (result.code == 200) {
        this.teachersend = result.data;
        this.saveData();
        this.getallstu();
        this.islogin = true;

      }
    },
     //临时登录回调:
     async token_login_temp() {
      let result = await this.$API.CommunityConvention.loginteacher({
        password: '111111',
        login_tel:'13456773847',
      });

      if (result.code == 200) {
        this.teachersend = result.data;
        this.saveData();
        this.getallstu();
        this.islogin = true;
      }
    },
    //获取所有学员信息
    async getallstu() {
      let result = await this.$API.CommunityConvention.getallstu({
        teacherid: this.teachersend.teacherid,
      });
      if (result.code == 200) {
        this.userlist = result.data.results;
      }
    },
    forstumsg(item) {
      this.getallsturequest(item.userid);
      this.centerDialogVisible = !this.centerDialogVisible;
    },
    //发起请求获取家长的所有需求:
    async getallsturequest(index) {
      let result = await this.$API.CommunityConvention.getallsturequest({
        userid:  index,
      });
      if (result.code == 200) {
        this.detail_user_request = result.data.result;
      }
    },
    showspuindexbut(item){
      this.userid = item.userid
      this.showspuindex = !this.showspuindex
    }
  },
};
</script>

<style>
.bgimg {
  position: relative;
  width: 100%;
  object-fit: cover;
}
.logincontent {
  width: 450px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: rgba(255, 255, 255, 0.5);
  color: #9c446e;
  font-weight: 600;
}
.inputline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.elinputp {
  width: 60%;
}
.logincontent_title {
  text-align: center;
  padding: 30px;
}
.logincontent_input {
}
.image {
  width: 200px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.time {
  font-size: 13px;
  padding-right: 20px;
  color: #999;
}
</style>
